<template>
	<view class="user">
		<view class="w user-top" :style="{ paddingTop: statusHeight }">
			<view class="dis_flex ml40 mr40">
				<view class="dis_f">
					<view class="w112 h112 p_re">
						<image class="w112 h112 radius501 p_ab border_f" :src="user_info.avatar" mode="aspectFill"></image>

<!-- 						<image class="w32 h32" @click="goEditUserInfo" style="position: absolute;bottom: 0;right: 0;" src="../../static/image/icon_xj.png" mode="widthFix"></image> -->
					</view>
					<view class="ml30">
						<view class="fz36 fw tf33">{{ user_info.nickname }}</view>
						<view class="fz24 tf_666 mt16">今天也是元气满满的一天！</view>
					</view>
				</view>
<!-- 				<view class="">
					<view class="w44 p_re" style="height: 44rpx;">
						<image class="w44" src="../../static/image/xiaoxi.png" mode="widthFix"></image>
						<view class="radius501" style="width: 16.5rpx; height: 16.5rpx; background-color: #FA541C; position: absolute;top: 0; right:0;"></view>
					</view>
				</view> -->
			</view>
			<!-- 			<view class="dis_f mt60">
				<view class="ml40">
					<view class="fz24 tf_999">收藏夹</view>
					<view class="fz32 tf22 fw mt6">
						10/20
					</view>
				</view>
				<view class="ml102" @click="goRedGift">
					<view class="fz24 tf_999">红包礼券</view>
					<view class="fz32 tf22 fw mt6">
						10/20
					</view>
				</view>
				<view class="ml102	">
					<view class="fz24 tf_999">我的评价</view>
					<view class="fz32 tf22 fw mt6">
						30
					</view>
				</view>
			</view> -->
		</view>
		<view class="bac_f ml24 mr24 pl30 pr30 pt30 pb40 radius16" style="margin-top: -200rpx;">
			<view class="dis_flex">
				<view class="fz30 fw">我的订单</view>
				<view class="dis_f" @click="goMineOrder">
					<view class="fz26 tf_999" style="margin-right: 4rpx;">我的订单</view>
					<image class="w16 h16" src="../../static/image/icon-navbar.png" mode="aspectFill"></image>
				</view>
			</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="12"></u-gap>
			<view class="dis_flex mt40">
				<view class="dfd_c ac" v-for="(item, index) in order_tab" :key="index" @click="menuClick(item)">
					<image class="w44" :src="item.imgUrl" mode="widthFix"></image>
					<view class="fz24 tf22 mt20">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="bac_f ml24 mr24 pl30 pr30 pt30 pb40 radius16 mt28">
			<view class="dis_flex"><view class="fz30 fw">我的服务</view></view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="12"></u-gap>
			<view class="dis_flex mt40 auto" style="width: 630rpx;">
				<view class="dfd_c ac h100" style="width: 102rpx;" @click="mineGroup">
					<image class="w44" src="../../static/image/pintuan.png" mode="widthFix"></image>
					<view class="fz24 tf22 mt12">我的拼团</view>
				</view>
				<button open-type="contact">
					<view class="dfd_c ac h100" style="width: 102rpx;">
						<image class="w44" src="../../static/image/user-kefu.png" mode="widthFix"></image>
						<view class="fz24 tf22 mt12">在线客服</view>
					</view>
				</button>
				<view class="dfd_c ac h100" style="width: 102rpx;" @click="goMineAddress">
					<image class="w44" src="../../static/image/user-dingwei.png" mode="widthFix"></image>
					<view class="fz24 tf22 mt12">我的地址</view>
				</view>
				<view class="dfd_c ac h100" style="width: 102rpx;" @click="goOpinionFeedback">
					<image class="w44" src="../../static/image/yijian.png" mode="widthFix"></image>
					<view class="fz24 tf22 mt12">意见反馈</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusHeight: '', //状态栏高度
			user_info: [], //用户信息
			order_tab: [
				{
					id: 1,
					name: '未付款',
					imgUrl: '../../static/image/daifukuan.png'
				},
				{
					id: 2,
					name: '待派单',
					imgUrl: '../../static/image/daifahuo.png'
				},
				{
					id: 3,
					name: '服务中',
					imgUrl: '../../static/image/fuwuzhong.png'
				},
				{
					id: 4,
					name: '待评价',
					imgUrl: '../../static/image/daieval.png'
				},
				{
					id: 5,
					name: '我的售后',
					imgUrl: '../../static/image/shouhou.png'
				}
			] //订单
		};
	},
	onLoad() {
		this.getUserInfo();
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 50 + 'px';
	},
	methods: {
		//菜单跳转
		menuClick(e) {
			console.log(e);
			e.id == 1 &&
				uni.navigateTo({
					url: '../../page_user/mineOrder/mineOrder?cur=' + 2
				});
			e.id == 2 &&
				uni.navigateTo({
					url: '../../page_user/mineOrder/mineOrder?cur=' + 3
				});
			e.id == 3 &&
				uni.navigateTo({
					url: '../../page_user/mineOrder/mineOrder?cur=' + 5
				});
			e.id == 4 &&
				uni.navigateTo({
					url: '../../page_user/mineOrder/mineOrder?cur=' + 6
				});
			e.id == 5 &&
				uni.navigateTo({
					url: '../../page_user/mineAftersale/mineAftersale'
				});
		},
		//跳转我的地址
		goMineAddress() {
			uni.navigateTo({
				url: '../../page_user/mineAddress/mineAddress'
			});
		},
		//获取用户信息
		getUserInfo() {
			this.user_info = uni.getStorageSync('user_info');
		},
		//跳转我的拼团
		mineGroup() {
			uni.navigateTo({
				url: '../../page_group/groupBooking/mineGroup/mineGroup'
			});
		},
		//跳转意见反馈界面
		goOpinionFeedback() {
			uni.navigateTo({
				url: '../../page_user/opinionFeedback/opinionFeedback'
			});
		},
		//跳转红包礼券界面
		goRedGift() {
			uni.navigateTo({
				url: '../../page_user/redGift/redGift'
			});
		},
		// 跳转资料编辑界面
		goEditUserInfo() {
			uni.navigateTo({
				url: '../../page_user/editUserInfo/editUserInfo'
			});
		},
		//跳转我的订单
		goMineOrder() {
			uni.navigateTo({
				url: '../../page_user/mineOrder/mineOrder'
			});
		}
	}
};
</script>

<style lang="scss">
button::after {
	border: none;
}
button {
	position: relative;
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	// font-size: 18px;
	text-align: center;
	text-decoration: none;
	// line-height: 1;
	line-height: 1.35;
	// border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #fff;
}
.user {
	.user-top {
		background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/825fddf74a7cd21557e631c1c8a61fd7.jpg');
		height: 580rpx;
		padding-top: 150rpx;
		box-sizing: border-box;
	}
}
</style>
